<template>
  <div class="box" style="margin-bottom:8px;">
    <div class="box-header" title="显示自系统上线以来，截止至今天的数据">
      <span class="title pos-left">{{title}}</span>
    </div>
    <div class="box-body">
      <div class="fullsize chart" id="chart-party-3"></div>
      <!-- <ul class="towerlist">
        <li class="item">
          <div class="title">最多申报类型</div>
          <div class="subtitle num fg-orange">{{maxType}}</div>
        </li>
        <li class="item">
          <div class="title">申报最多部位</div>
          <div class="subtitle num fg-orange">{{maxDep}}</div>
        </li>
        <li class="item">
          <div class="title">累计申报总量</div>
          <div class="subtitle num fg-green">{{total}}</div>
        </li>
      </ul> -->
      <x-loading :show="showLoading"></x-loading>
      <dl-31 ref="dialog" :show="showModal" :take="keyModal"></dl-31>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import echarts from "echarts";
import Loading from "@/components/Loading";
import dl31 from "@/view/party/dl_31";

export default {
  data() {
    return {
      showLoading: false,
      // maxType: "",
      // maxDep: "",
      // total: 0,
      chartInstance: null,
      chartData: null,
      option: null,
      params: null,
      showModal: false,
      keyModal: null,
      startTime:this.dateShift(-365*2),
      endTime:this.dateShift(0)
    };
  },
  props: {
    title: String
  },
  components: {
    "x-loading": Loading,
    "dl-31": dl31
  },
  mounted() {
      this.renderChart()
  },
  methods: {
    renderChart() {
      this.showLoading = true;
      let params = {
        startTime:this.startTime + ' 00:00:00',
          endTime:this.endTime + ' 23:59:59'
      }
      axios.get(this.URLHEAD + "DDXMWCQK",{
        params:params
      }).then(res => {
        let $this = this;
        let data = res.data;
         this.option = {
          legend: {
            top: 20,
            left: 20,
            textStyle: {
              color: "#fff"
            },
            data: ["完成数量", "未完成数量"],
            itemWidth: 10,
            itemHeight: 10
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "10%",
            containLabel: true
          },

          tooltip: {
            show: "true",
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
          },

          xAxis: {
            type: "value",
            axisTick: { show: false },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff"
              }
            },
            splitLine: {
              show: true
            }
          },
          yAxis: [
            {
              type: "category",
              axisTick: { show: false },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#fff"
                }
              },
              data: data.Data.map(item => {
                return item.name;
              })
            }
          ],
          series: [
            {
              name: "完成数量",
              stack: "总量",
              type: "bar",
              itemStyle: {
                normal: {
                  show: true,
                  borderWidth: 0,
                  borderColor: "#333",
                  color: "#00ccff",
                  label: {
                    show: true,
                    textStyle: {
                      color: "#fff"
                    },
                    position: "inside",
                    formatter: function(p) {
                      return p.value > 0 ? p.value : "";
                    }
                  }
                }
              },
              barGap: "0%",
              barCategoryGap: "50%",
              data: data.Data.map(item => {
                return item.complete;
              })
            },
            {
              name: "未完成数量",
              stack: "总量",
              type: "bar",
              itemStyle: {
                normal: {
                  show: true,
                  borderWidth: 0,
                  borderColor: "#333",
                  color: "#ff6600",
                  label: {
                    show: true,
                    textStyle: {
                      color: "#fff"
                    },
                    position: "inside",
                    formatter: function(p) {
                      return p.value > 0 ? p.value : "";
                    }
                  }
                }
              },
              barGap: "0%",
              barCategoryGap: "50%",
              data: data.Data.map(item => {
                return item.notComplete;
              })
            }
          ]
        };
        
        this.chartInstance=this.$Crender('chart-party-3',this.option)
        this.chartInstance.on('click',e=>{
            let type = e.name
            $this.keyModal=type
            $this.$refs.dialog.query(type)
        })
        this.showLoading = false;
      });
    }
  }
};
</script>